<template>
    <div class="login_container">
        <div class="login_box">
            <div class="login_pic">
                <img src="../assets/logo.png" alt="用户头像">
            </div>
            <el-form
                :model="loginform"
                :rules="loginrules"
                ref="loginref"
                class="login_form"
                @keyup.native.enter="login"
                >
                <el-form-item prop="login_un_input">
                    <el-input
                    prefix-icon="el-icon-user"
                    placeholder= "请输入用户名"
                    v-model= "loginform.login_un_input"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item prop="login_pw_input">
                    <el-input
                        prefix-icon= "el-icon-key"
                        placeholder= "请输入密码"
                        v-model= "loginform.login_pw_input"
                        show-password
                    >
                    </el-input>
                </el-form-item>
                <el-form-item prop="login_cheack_input">
                    <el-row v-if="showCheck">
                        <el-col :span="18">
                            <el-input v-model="loginform.login_cheack_input" placeholder="请输入验证码"></el-input>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-tooltip content="点击更换验证码" placement="bottom" effect="light">
                                <span class="code" @click="createCode()" :style="codebgAndcolor">{{checkCode}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="form_button">
                    <el-button type="primary" round @click="login">登录</el-button>
                    <el-button type="info" round @click="resetlogin">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        var checkCode = (rule, value, callback) => {
            if(value !== this.checkCode) {
                callback(new Error('输入的验证码错误！'));
            }else{
                callback();
            }
        };
        return {
            showCheckCount:0,
            showCheck: false,
            codebgAndcolor:'',
            //表单验证的prop和表单值的v-modle绑定的值要一致
            loginform: {
                login_un_input: '',
                login_pw_input: '',
                login_cheack_input: ''
            },
            checkCode:'',
            loginrules: {
                login_un_input: [
                    {
                        required: true,
                        message: '用户名不能为空！',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 10,
                        message: '用户名长度应在3至10字符之间！',
                        trigger: 'blur'
                    },
                ],
                login_pw_input: [
                    {
                        required: true,
                        message: '密码不能为空！',
                        trigger: 'blur'
                    },
                ],
                login_cheack_input:[
                    {
                        validator: checkCode,
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        createCode(){
            this.checkCode ='';
            var random =['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I',
                        'J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];//随机数  
            for(var i = 0; i < 4; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                this.checkCode += random[index];//根据索引取得随机数加到checkCode上 
            }
        },
        login(){
            this.$refs.loginref.validate(async(valid)=>{
                if(valid){
                    const { data: res } = await this.$http.post('login',{
                        username: this.loginform.login_un_input,
                        password: this.loginform.login_pw_input
                        });
                        switch(res.meta.status){
                            case 200:
                                window.sessionStorage.setItem('token',res.data.token);
                                this.giveLoginUsername(this.loginform.login_un_input);
                                this.$router.push('/home');
                                return this.$message(
                                    {
                                        center:true,
                                        showClose: true,
                                        type: 'success',
                                        duration:2000,
                                        message: res.meta.msg
                                    }
                                );
                            break;
                            case 400:
                                this.showCheckCount++;
                                if(this.showCheckCount>=3){
                                    this.createCode();
                                    this.showCheck = true;
                                }
                                return this.$message(
                                    {
                                        center:true,
                                        showClose: true,
                                        type: 'error',
                                        duration:2000,
                                        message: res.meta.msg
                                    }
                                );
                            break;
                            default :
                                this.showCheckCount++;
                                if(this.showCheckCount>=3){
                                    this.createCode();
                                    this.showCheck = true;
                                }
                                return this.$message(
                                    {
                                        center:true,
                                        showClose: true,
                                        duration:2000,
                                        message: '登录失败！'
                                    }
                                ); 
                            break;
                        }
                }else{
                    this.showCheckCount++;
                    if(this.showCheckCount>=3){
                        this.createCode();
                        this.showCheck = true;
                    }
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            duration:2000,
                            message: '输入信息有误！'
                        }
                    );
                }
            });
        },
        giveLoginUsername(value){
            this.$store.commit('rememberLoginUser',value);
        },
        resetlogin(){
            if(this.showCheckCount>=3){
                this.createCode();
            }
            this.$refs.loginref.resetFields();
        }
    },
    watch:{
        'checkCode'(){
            let randomcolor = Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,'0');
            let randombgcolor = Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,'0');
            this.codebgAndcolor = 'color: #' + randomcolor + ';background-color: #' + randombgcolor;
        }
    }
}
</script>

<style lang="less" scoped>
    .login_container{
        background-color:#2b4b6b;
        height: 100vh;
        margin: 0;
        .login_box{
            width: 480px;
            height: 330px;
            background-color:#fff;
            border-radius: 10px;
            box-shadow: 0 20px 20px #2b2b2b;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            .login_pic{
                width: 100px;
                height: 100px;
                border: 10px solid #5288be;
                border-radius: 50%;
                box-shadow: 0 0 5px #2b2b2b;
                overflow: hidden;
                position: absolute;
                left: 50%;
                transform:translate(-50%,-50%);
                img{
                    width: 100%;
                    height: 100%;
                    background-color: #f9f9f7;
                }
            }
            .login_form{
                padding: 0 50px;
                margin-top: 18%;
                .form_button{
                    width: 180px;
                    text-align: center;
                    margin: 0 auto;
                }
                .code{
                    min-width: 5vw;
                    height: 100%;
                    font-size: 1.4rem;
                    font-style:italic;
                    font-weight:bolder;
                    padding:2px 3px; 
                    letter-spacing:5px;
                    cursor: pointer;
                    user-select:none;
                    -moz-user-select:none;
                }
            }
        }
    }
</style>
